<template>
	<view class="Message pTab">
		<!-- 顶部关注 -->
		<view class="topFollowDom">
			<view class="topFollow dis">
				<view class="topFollowL">
					<view class="tFLT">开启微信端消息提醒功能</view>
					<view class="tFLB">
						关注公众号"河北校翼行学子俱乐部"
						<br />
						实时通知消息不错漏信息
					</view>
				</view>
				<view class="topFollowR" @click="openAdvert">点我关注</view>
			</view>
		</view>
		<view class="tabList dis">
			<view class="tabItem dis" @click="clickTab(1)">
				<view class="TitemI">
					<image src="/pages/static/reply.png" mode=""></image>
				</view>
				<view class="TitemTE">回复我的</view>
			</view>
			<view class="tabItem dis" @click="clickTab(2)">
				<view class="TitemI">
					<image src="/pages/static/watch.png" mode=""></image>
				</view>
				<view class="TitemTE">插眼消息</view>
			</view>
			<view class="tabItem dis" @click="clickTab(3)">
				<view class="TitemI">
					<image src="/pages/static/like.png" mode=""></image>
				</view>
				<view class="TitemTE">收到的赞</view>
			</view>
			<view class="tabItem dis" @click="clickTab(4)">
				<view class="TitemI">
					<image src="/pages/static/system.png" mode=""></image>
				</view>
				<view class="TitemTE">系统通知</view>
			</view>
		</view>
		<!-- 消息列表 -->
		<view class="MessageList" v-if="messageList.length > 0">
			<view class="listItem dis" v-for="item in messageList" :key="item.id" @click="messageClick(item)">
				<view class="itemL dis">
					<view class="itemLL">
						<image v-if="item.type == 'system'" src="/post/static/default_avatar.jpg" mode=""></image>
						<image v-else :src="item.senderAvatar" mode="aspectFill"></image>
					</view>
					<view class="itemLR dis" v-if="item.type == 'system'">
						<view class="itemLRTSys dis">
							<view class="itemName">系统通知</view>
							<view class="itemType">{{ item.createTime }}</view>
						</view>
						<view class="itemLRB">{{ item.content }}</view>
					</view>
					<view class="itemLR dis" v-else>
						<view class="itemLRT dis">
							<view class="itemName">{{ item.senderNickname }}</view>
							<view class="itemType">{{ item.title }}</view>
						</view>
						<view class="itemLRB">{{ item.createTime }}</view>
					</view>
				</view>
				<view class="itemR ellipsis3" v-if="item.type != 'system'">{{ item.content }}</view>
			</view>
			<view class="noData">以上是最近7天的消息通知</view>
		</view>
		<view class="noData" v-else>暂无数据</view>
		<!-- 广告 -->
		<up-popup :show="show" :round="10" :closeable="true" mode="bottom" @close="close" @open="open">
			<view class="vPopup">
				<view class="popTile p20">{{ advertText }}</view>
				<view class="popImg">
					<view class="popImgDom p20">
						<image src="/static/001.jpg" show-menu-by-longpress="true" mode="aspectFit"></image>
					</view>
					<view class="popTextDom">长安上方二维码识别</view>
				</view>
			</view>
		</up-popup>
		<!-- 底部导航 -->
		<custom-tabbar :activeIndex="current" :isHint="0" />
	</view>
</template>

<script setup>
import { timeago } from '@/util/util.js';
import { getMessage, clearMessagePoint, statisticsWebsitePVandUV } from '@/config/api.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
import CustomTabbar from '@/components/custom-tabbar.vue';
const current = ref(3);
const schoolInfo = ref({});
onLoad(() => {
	statisticsWebsitePVandUV();
	getMessageFun();
	clearMessagePointFun();
});
onShow(() => {
	const schoolStr = uni.getStorageSync('schoolInfo');
	if (!schoolStr) {
		uni.navigateTo({
			url: '/pages/selectSchool/index?isIndex=1'
		});
	} else {
		const school = JSON.parse(schoolStr);
		schoolInfo.value = school;
		uni.setNavigationBarTitle({
			title: school.schoolName + '校话'
		});
	}
	current.value = 3;
});
// 设置消息已读
const clearMessagePointFun = async () => {
	await clearMessagePoint();
};

const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(10);
const messageList = ref([]);
const getMessageFun = async () => {
	const data = {
		pageNum: pageNum.value,
		pageSize: pageSize.value
	};
	const res = await getMessage(data);
	res.data.pageInfo.list.map((item) => {
		item.createTime = timeago(item.createTime);
		return item;
	});
	if (res.code == 0) {
		messageList.value = [...messageList.value, ...res.data.pageInfo.list];
		total.value = res.data.pageInfo.total;
	}
};
const messageClick = (item) => {
	console.log(item);
	const match = item.link.match(/threadId=([^&]+)/);
	if (match && match[1]) {
		const threadId = match[1];
		uni.navigateTo({
			url: `/post/post/postDetails?id=${threadId}&remarkId=${item.postId}`
		});
	} else {
		console.log('threadId not found in the URL');
	}
};

// 广告弹窗
const show = ref(false);
const advertType = ref(1);
const advertText = ref('关注微信公众号接受消息通知');
const open = () => {};
const close = () => {
	show.value = false;
};
const openAdvert = () => {
	show.value = true;
};

// 点击tab
const clickTab = (num) => {
	uni.navigateTo({
		url: `/pages/message/mesInfo?num=${num}`
	});
};

onReachBottom(() => {
	if (messageList.value.length >= total.value) {
		console.log('没有更多内容了');
	} else {
		pageNum.value++;
		getMessageFun(tabsId.value);
	}
});
</script>

<style lang="scss" scoped>
.Message {
	padding-top: 30rpx;
	.topFollowDom {
		padding-left: 30rpx;
		padding-right: 30rpx;
		.topFollow {
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border: 4rpx solid #1b9aee;
			border-radius: 20rpx;
			.topFollowL {
				.tFLT {
					font-weight: 700;
				}
				.tFLB {
					line-height: 50rpx;
					font-size: 24rpx;
					color: #666;
				}
			}
			.topFollowR {
				padding: 15rpx 30rpx;
				border-radius: 50rpx;
				color: #fff;
				font-size: 24rpx;
				background: linear-gradient(to bottom left, #564ae9, #537cf5);
			}
		}
	}
	.tabList {
		padding: 50rpx 30rpx;
		.tabItem {
			flex-direction: column;
			align-items: center;
			width: 25%;

			.TitemI {
				width: 64rpx;
				height: 64rpx;
				overflow: hidden;
			}
			.TitemTE {
				margin-top: 15rpx;
				font-size: 28rpx;
				color: #555;
				text-align: center;
			}
		}
	}
	.MessageList {
		.listItem {
			padding: 35rpx 0;
			padding-left: 30rpx;
			padding-right: 30rpx;
			border-bottom: 2rpx solid #e8e8e8;
			.itemL {
				flex: 1;
				height: 90rpx;
				.itemLL {
					margin-top: 10rpx;
					margin-right: 20rpx;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					overflow: hidden;
				}
				.itemLR {
					flex: 1;
					flex-direction: column;
					justify-content: space-between;
					font-size: 24rpx;
					color: #666;
					.itemLRT {
						.itemName {
							font-weight: 700;
							color: #000;
							font-size: 28rpx;
						}
						.itemType {
							margin-left: 10rpx;
						}
					}
					.itemLRTSys {
						justify-content: space-between;
						align-items: center;
						width: 100%;
						.itemName {
							font-weight: 700;
							color: #000;
							font-size: 28rpx;
						}
						.itemType {
							margin-left: 10rpx;
						}
					}
				}
			}
			.itemR {
				width: 144rpx;
				height: 100%;
				color: #666;
				font-size: 24rpx;
				text-align: right;
			}
		}
	}
	.vPopup {
		height: 770rpx;
		.popTile {
			width: 100%;
			font-size: 30rpx;
			font-weight: 700;
			text-align: center;
		}
		.popImg {
			margin: auto;
			width: 510rpx;
			height: 600rpx;
			border-radius: 15rpx;
			border: 1px solid #07c160;
			overflow: hidden;
			.popImgDom {
				width: 100%;
				height: 520rpx;
				image {
					width: 100%;
				}
			}
			.popTextDom {
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				color: #fff;
				background: #07c160;
				text-align: center;
			}
		}
	}
	.noData {
		width: 100%;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #999;
	}
}
</style>
<style>
image {
	width: 100%;
	height: 100%;
}
</style>
